<md-dialog flex="60">
    <md-toolbar>
        <div class="md-toolbar-tools">
            <h2>{{locals.formTitle}}</h2>
            <span flex></span>
            <md-button class="md-icon-button" ng-click="cancel()">
                <md-icon md-svg-src="./assets/img/ic_close_24px.svg" aria-label="Close dialog"></md-icon>
            </md-button>
        </div>
    </md-toolbar>
    <md-dialog-content class="" style="padding: 40px 40px 30px 14px;">
        <div ng-app="linc.fileUpload">
            <div class="row" ng-controller="uploadController" nv-file-drop="" uploader="uploader"
                 filters="queueLimit, customFilter">
                <div class="col-md-4">
                    <div class="portlet light bordered">
                        <div class="portlet-title">
                            <div class="caption font-green-sharp">
                                <i class="icon-settings font-green-sharp"></i>
                                <span class="caption-subject bold uppercase">Select files</span>
                                <span class="caption-helper hide"></span>
                            </div>
                        </div>
                        <div class="portlet-body">
                            <div ng-show="uploader.isHTML5">
                                <div class="file-drop-zone margin-bottom-20" nv-file-over="" uploader="uploader"
                                     over-class="file-drop-zone-over"> Drop file into zone
                                </div>
                                <!--
                                <div nv-file-drop="" uploader="uploader" options="{ url: '/foo' }">
                                    <div nv-file-over="" uploader="uploader" over-class="file-drop-zone-over" class="file-drop-zone margin-bottom-20"> Another drop zone with its own settings </div>
                                </div>
                                 -->
                            </div>
                            <input type="file" nv-file-select="" uploader="uploader" multiple/>
                            <!--
                            <br/> Single
                            <input type="file" nv-file-select="" uploader="uploader" />
                             -->
                        </div>
                    </div>
                </div>
                <div class="col-md-8">
                    <div class="portlet light bordered">
                        <div class="portlet-title">
                            <div class="caption font-green-sharp">
                                <i class="icon-settings font-green-sharp"></i>
                                <span class="caption-subject bold uppercase">Upload queue</span>
                                <span class="caption-helper">Queue length: {{ uploader.queue.length }}</span>
                            </div>
                        </div>
                        <div class="portlet-body">
                            <div class="table-scrollable table-scrollable-borderless">
                                <table class="table table-hover table-light">
                                    <thead>
                                    <tr class="uppercase">
                                        <th width="50%">Name</th>
                                        <th ng-show="uploader.isHTML5">Size</th>
                                        <th ng-show="uploader.isHTML5">Progress</th>
                                        <th>Status</th>
                                        <th>Actions</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr ng-repeat="item in uploader.queue">
                                        <td>
                                            <strong>{{ item.file.name }}</strong>
                                        </td>
                                        <td ng-show="uploader.isHTML5" nowrap>{{ item.file.size/1024/1024|number:2 }}
                                            MB
                                        </td>
                                        <td ng-show="uploader.isHTML5">
                                            <div class="progress progress-sm" style="margin-bottom: 0;">
                                                <div class="progress-bar progress-bar-info" role="progressbar"
                                                     ng-style="{ 'width': item.progress + '%' }"></div>
                                            </div>
                                        </td>
                                        <td class="text-center">
                                            <span ng-show="item.isSuccess" class="text-success">
                                                <i class="glyphicon glyphicon-ok"></i>
                                            </span>
                                            <span ng-show="item.isCancel" class="text-info">
                                                <i class="glyphicon glyphicon-ban-circle"></i>
                                            </span>
                                            <span ng-show="item.isError" class="text-danger">
                                                <i class="glyphicon glyphicon-remove"></i>
                                            </span>
                                        </td>
                                        <td nowrap>
                                            <button type="button" class="btn btn-success btn-xs"
                                                    ng-click="item.upload()"
                                                    ng-disabled="item.isReady || item.isUploading || item.isSuccess">
                                                <span class="glyphicon glyphicon-upload"></span> Upload
                                            </button>
                                            <button type="button" class="btn btn-warning btn-xs"
                                                    ng-click="uploader.cancelItem(item)"
                                                    ng-disabled="!item.isUploading">
                                                <span class="glyphicon glyphicon-ban-circle"></span> Cancel
                                            </button>
                                            <button type="button" class="btn btn-danger btn-xs"
                                                    ng-click="uploader.removeItem(item)">
                                                <span class="glyphicon glyphicon-trash"></span> Remove
                                            </button>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div>
                                <p>Queue progress:</p>
                                <div class="progress progress-sm">
                                    <div class="progress-bar progress-bar-info" role="progressbar"
                                         ng-style="{ 'width': uploader.progress + '%' }"></div>
                                </div>
                            </div>
                            <button type="button" class="btn btn-success btn-s" ng-click="uploader.uploadAll()"
                                    ng-disabled="!uploader.getNotUploadedItems().length">
                                <span class="glyphicon glyphicon-upload"></span> Upload all
                            </button>
                            <button type="button" class="btn btn-warning btn-s" ng-click="uploader.cancelAll()"
                                    ng-disabled="!uploader.isUploading">
                                <span class="glyphicon glyphicon-ban-circle"></span> Cancel all
                            </button>
                            <button type="button" class="btn btn-danger btn-s" ng-click="uploader.removeAllItem()"
                                    ng-disabled="!uploader.queue.length">
                                <span class="glyphicon glyphicon-trash"></span> Remove all
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div style="text-align: right;" ng-controller="uploadController" nv-file-drop="" uploader="uploader"
                 filters="queueLimit, customFilter">
                <button type="button" class="btn btn-primary" ng-click="save()">
                    Save
                </button>
            </div>
        </div>
    </md-dialog-content>
</md-dialog>